<template>
  <div class="year-rule-container">
    <select class="select" v-model="queryData.type" @change="changeType">
      <option value="year">年份</option>
    </select>
    <input class='kworld' v-model="queryData.key" @change="changeNum" placeholder="请输入关键字">
    <button class="query" @click="query">查询</button>
    <button class="reset" @click="reset">重置</button>
    <RuleOfYear class="rule" ref="rule" v-show="isYear" @setQueryKey="setQueryKey" />
  </div>
</template>

<script>
import RuleOfYear from "@/components/common/RuleOfYear.vue";

export default {
  name: "YearInput",
  emits: ["query"],
  components: {RuleOfYear},
  data() {
    return {
      isYear: true,
      queryData: {
        key: "",
        type: "year",
      }
    }
  },

  computed: {
  },
  methods: {
    //设置key
    setQueryKey(key) {
      this.queryData.key = key;
    },
    //改变查询类型
    changeType() {
      if (this.queryData.type == "year") {
        //初始化刻度
        this.$refs.rule.calculateRule(0);
        this.isYear = true;
      } else {
        this.queryData.key = "";
        this.isYear = false;
      }
    },

    //改变查询内容
    changeNum() {
      if (this.queryData.type == "year") {
        let year = Number.parseInt(this.queryData.key, 10);
        this.$refs.rule.calculateRule(year);
      }
    },

    //重置
    reset() {
      this.queryData.type = "year";
      //初始化刻度
      this.$refs.rule.calculateRule(0);
      this.isYear = true;
    },

    query() {
      this.$emit("query", this.queryData);
    }
  }
}
</script>

<style scoped>
.year-rule-container {
  width: 1000px;
  height: 500px;
  position: relative;
}

.select {
  position: absolute;
  width: 100px;
  height: 50px;
  left: calc(50% - 300px);
  border-radius: 8px;
  border-width: 5px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: brown;
  background-color: darkcyan;
}

.kworld {
  position: absolute;
  width: 250px;
  height: 50px;
  left: calc(50% - 200px);
  border-radius: 8px;
  font-size: 20px;
  text-align: center;
}

.query {
  position: absolute;
  width: 100px;
  height: 50px;
  right: calc(50% - 170px);
  border-radius: 8px;
  border: none;
  text-align: center;
  color: white;
  background-color: darkcyan;
  font-size: 18px;
  /*过度动画效果时间*/
  transition: all 0.3s;
}

/*定义鼠标滑过事件*/
.query:hover {
  /*放大*/
  transform: scale(1.2);
}

.reset {
  position: absolute;
  width: 100px;
  height: 50px;
  right: calc(50% - 280px);
  border-radius: 8px;
  border: none;
  text-align: center;
  color: white;
  background-color: darkcyan;
  font-size: 18px;
  /*过度动画效果时间*/
  transition: all 0.3s;
}

/*定义鼠标滑过事件*/
.reset:hover {
  /*放大*/
  transform: scale(1.2);
}

.rule {
  position: absolute;
  top: 100px;
  left: calc(50% - 300px);
}
</style>

